<?xml version="1.0" encoding="UTF-8"?>

<div xmlns="http://www.w3.org/1999/xhtml" xid="window" class="window" component="$model/UI2/system/components/justep/window/window" data-bind="component:{name:'$model/UI2/system/components/justep/window/window'}" __justepbasexid__="__baseID__" components="$model/UI2/system/components/justep/labelEdit/labelEdit,$model/UI2/system/components/justep/panel/panel,$model/UI2/system/components/justep/panel/child,$model/UI2/system/components/justep/windowDialog/windowDialog,$model/UI2/system/components/justep/model/model,$model/UI2/system/components/justep/window/window,$model/UI2/system/components/justep/controlGroup/controlGroup,$model/UI2/system/components/justep/input/password,$model/UI2/system/components/justep/titleBar/titleBar,$model/UI2/system/components/justep/data/data,$model/UI2/system/components/justep/button/button,$model/UI2/system/components/justep/input/input,">  
  <div xmlns="" component="$model/UI2/system/components/justep/model/model" xid="model1" style="display:none" data-bind="component:{name:'$model/UI2/system/components/justep/model/model'}"/>  
  <div xmlns="" component="$model/UI2/system/components/justep/panel/panel" class="x-panel x-full" xid="panel1" data-bind="component:{name:'$model/UI2/system/components/justep/panel/panel'}"> 
    <div class="x-panel-top" xid="top1" component="$model/UI2/system/components/justep/panel/child" data-bind="component:{name:'$model/UI2/system/components/justep/panel/child'}"> 
      <div component="$model/UI2/system/components/justep/titleBar/titleBar" class="x-titlebar" xid="titleBar1" data-bind="component:{name:'$model/UI2/system/components/justep/titleBar/titleBar'}" data-config="{&quot;title&quot;:&quot;input&quot;}"> 
        <div class="x-titlebar-left" xid="div1"> 
          <a component="$model/UI2/system/components/justep/button/button" class="btn btn-link" xid="button1" data-bind="component:{name:'$model/UI2/system/components/justep/button/button'}" data-events="onClick:backBtn" data-config="{&quot;icon&quot;:&quot;icon-chevron-left&quot;}"> 
            <i xid="i1" class="icon-chevron-left"/>  
            <span xid="span1"/> 
          </a> 
        </div>  
        <div class="x-titlebar-title" xid="div2">input</div>  
        <div class="x-titlebar-right " xid="div3"> 
          <div class="empty"/> 
        </div> 
      </div>  
      <div id="aler"/> 
    </div>  
    <div class="x-panel-content" xid="content1" component="$model/UI2/system/components/justep/panel/child" data-bind="component:{name:'$model/UI2/system/components/justep/panel/child'}"> 
      <div component="$model/UI2/system/components/justep/controlGroup/controlGroup" class="x-control-group" data-bind="component:{name:'$model/UI2/system/components/justep/controlGroup/controlGroup'}" data-config="{&quot;title&quot;:&quot;title&quot;}"> 
        <h3 style="height:48px;vertical-align: middle;padding: 8px;display: inline-block;">input style</h3>  
        <a component="$model/UI2/system/components/justep/button/button" class="btn btn-link" xid="button2" data-bind="component:{name:'$model/UI2/system/components/justep/button/button'},visible:flag" data-events="onClick:showInpStyleSource" data-config="{&quot;label&quot;:&quot;源码&quot;}"> 
          <i xid="i2"/>  
          <span xid="span2">源码</span> 
        </a>  
        <div xid="controlGroupStyle"> 
          <input component="$model/UI2/system/components/justep/input/input" class="form-control x-label-edit" xid="input1" data-bind="component:{name:'$model/UI2/system/components/justep/input/input'}" data-config="{&quot;placeHolder&quot;:&quot;input-default&quot;}"/>  
          <input component="$model/UI2/system/components/justep/input/input" class="form-control input-lg x-label-edit" xid="input2" data-bind="component:{name:'$model/UI2/system/components/justep/input/input'}" data-config="{&quot;placeHolder&quot;:&quot;input-lg&quot;}"/>  
          <input component="$model/UI2/system/components/justep/input/input" class="form-control input-sm x-label-edit" xid="input3" data-bind="component:{name:'$model/UI2/system/components/justep/input/input'}" data-config="{&quot;placeHolder&quot;:&quot;input-sm&quot;}"/>  
          <input component="$model/UI2/system/components/justep/input/password" class="form-control x-label-edit" xid="password1" type="password" data-bind="component:{name:'$model/UI2/system/components/justep/input/password'}" data-config="{&quot;placeHolder&quot;:&quot;password&quot;}"/> 
        </div> 
      </div>  
      <div component="$model/UI2/system/components/justep/controlGroup/controlGroup" class="x-control-group" xid="controlGroupUse" data-bind="component:{name:'$model/UI2/system/components/justep/controlGroup/controlGroup'}" data-config="{&quot;title&quot;:&quot;title&quot;}"> 
        <h3 style="height:48px;vertical-align: middle;padding: 8px;display: inline-block;">input use</h3>  
        <a component="$model/UI2/system/components/justep/button/button" class="btn btn-link" xid="button4" data-bind="component:{name:'$model/UI2/system/components/justep/button/button'},visible:flag" data-events="onClick:showInpUseSource" data-config="{&quot;label&quot;:&quot;源码&quot;}"> 
          <i xid="i4"/>  
          <span xid="span4">源码</span> 
        </a>  
        <div component="$model/UI2/system/components/justep/labelEdit/labelEdit" class="x-label-edit" xid="labelInput1" data-bind="component:{name:'$model/UI2/system/components/justep/labelEdit/labelEdit'}"> 
          <label class="x-label" xid="label1" style="width:20%;" data-bind="text:data.label('fString')"/>  
          <input component="$model/UI2/system/components/justep/input/input" class="form-control x-edit" xid="input7" data-bind="component:{ref:data.ref('fString'),name:'$model/UI2/system/components/justep/input/input'},event:{focus:$model._callModelFn.bind($model, 'attrExplain')}" data-config="{&quot;placeHolder&quot;:&quot;placeHolder......&quot;}"/> 
        </div>  
        <div component="$model/UI2/system/components/justep/labelEdit/labelEdit" class="x-label-edit" xid="labelInput2" data-bind="component:{name:'$model/UI2/system/components/justep/labelEdit/labelEdit'}"> 
          <label class="x-label" xid="label2" style="width:20%;" data-bind="text:data.label('fInteger')"/>  
          <input component="$model/UI2/system/components/justep/input/input" class="form-control x-edit" xid="input8" data-bind="component:{ref:data.ref('fInteger'),name:'$model/UI2/system/components/justep/input/input'}"/> 
        </div>  
        <div component="$model/UI2/system/components/justep/labelEdit/labelEdit" class="x-label-edit" xid="labelInput3" data-bind="component:{name:'$model/UI2/system/components/justep/labelEdit/labelEdit'}"> 
          <label class="x-label" xid="label3" style="width:20%;" data-bind="text:data.label('fFloat')"/>  
          <input component="$model/UI2/system/components/justep/input/input" class="form-control x-edit" xid="input9" data-bind="component:{ref:data.ref('fFloat'),name:'$model/UI2/system/components/justep/input/input'}"/> 
        </div>  
        <div component="$model/UI2/system/components/justep/labelEdit/labelEdit" class="x-label-edit" xid="labelInput4" data-bind="component:{name:'$model/UI2/system/components/justep/labelEdit/labelEdit'}"> 
          <label class="x-label" xid="label4" style="width:20%;" data-bind="text:data.label('fDecimal')"/>  
          <input component="$model/UI2/system/components/justep/input/input" class="form-control x-edit" xid="input10" data-bind="component:{ref:data.ref('fDecimal'),name:'$model/UI2/system/components/justep/input/input'}"/> 
        </div>  
        <div component="$model/UI2/system/components/justep/labelEdit/labelEdit" class="x-label-edit" xid="labelInput5" data-bind="component:{name:'$model/UI2/system/components/justep/labelEdit/labelEdit'}"> 
          <label class="x-label" xid="label5" style="width:20%;" data-bind="text:data.label('fDate')"/>  
          <input component="$model/UI2/system/components/justep/input/input" class="form-control x-edit" xid="input11" data-bind="component:{ref:data.ref('fDate'),name:'$model/UI2/system/components/justep/input/input'}" data-config="{&quot;format&quot;:&quot;yyyy-MM-dd hh:mm&quot;}"/> 
        </div>  
        <div component="$model/UI2/system/components/justep/labelEdit/labelEdit" class="x-label-edit" xid="labelInput6" data-bind="component:{name:'$model/UI2/system/components/justep/labelEdit/labelEdit'}"> 
          <label class="x-label" xid="label6" style="width:20%;" data-bind="text:data.label('fText')"/>  
          <input component="$model/UI2/system/components/justep/input/input" class="form-control x-edit" xid="input4" data-bind="component:{ref:data.ref('fText'),name:'$model/UI2/system/components/justep/input/input'}"/> 
        </div> 
      </div>  
      <div component="$model/UI2/system/components/justep/controlGroup/controlGroup" class="x-control-group" xid="controlGroupEvent" data-bind="component:{name:'$model/UI2/system/components/justep/controlGroup/controlGroup'}" data-config="{&quot;title&quot;:&quot;title&quot;}"> 
        <h3 style="height:48px;vertical-align: middle;padding: 8px;display: inline-block;">input event</h3>  
        <a component="$model/UI2/system/components/justep/button/button" class="btn btn-link" xid="button7" data-bind="component:{name:'$model/UI2/system/components/justep/button/button'}" data-events="onClick:showJsSource" data-config="{&quot;label&quot;:&quot;js&quot;}"> 
          <i xid="i7"/>  
          <span xid="span7">js</span> 
        </a>  
        <a component="$model/UI2/system/components/justep/button/button" class="btn btn-link" xid="button6" data-bind="component:{name:'$model/UI2/system/components/justep/button/button'},visible:flag" data-events="onClick:showInpEvent" data-config="{&quot;label&quot;:&quot;源码&quot;}"> 
          <i xid="i6"/>  
          <span xid="span6">源码</span> 
        </a>  
        <input component="$model/UI2/system/components/justep/input/input" class="form-control x-label-edit" xid="input16" data-bind="component:{name:'$model/UI2/system/components/justep/input/input'}" data-events="onChange:inputChange"/>  
        <p>onRender事件，下面例子中输入1显示蓝色，输入2显示红色，输入其他显示黄色</p>  
        <input component="$model/UI2/system/components/justep/input/input" class="form-control x-label-edit" xid="inpRender" data-bind="component:{name:'$model/UI2/system/components/justep/input/input'}" data-events="onRender:inputRender;onChange:inpRenderChange"/>  
        <input component="$model/UI2/system/components/justep/input/input" class="form-control x-label-edit" xid="getInputValue" data-bind="component:{name:'$model/UI2/system/components/justep/input/input'}" data-config="{&quot;placeHolder&quot;:&quot;获取该input的值 &quot;}"/>  
        <a component="$model/UI2/system/components/justep/button/button" class="btn btn-default" data-bind="component:{name:'$model/UI2/system/components/justep/button/button'}" data-events="onClick:dynamicCreateInput" data-config="{&quot;label&quot;:&quot;dynamicCreate&quot;}"> 
          <i/>  
          <span>dynamicCreate</span> 
        </a>  
        <a component="$model/UI2/system/components/justep/button/button" class="btn btn-default" xid="button8" data-bind="component:{name:'$model/UI2/system/components/justep/button/button'}" data-events="onClick:getInpRenVal" data-config="{&quot;label&quot;:&quot;getInpRenVal&quot;}"> 
          <i xid="i8"/>  
          <span xid="span8">getInpRenVal</span> 
        </a>  
        <a component="$model/UI2/system/components/justep/button/button" class="btn btn-default" xid="button5" data-bind="component:{name:'$model/UI2/system/components/justep/button/button'}" data-events="onClick:getInputVal" data-config="{&quot;label&quot;:&quot;getInputVal&quot;}"> 
          <i xid="i5"/>  
          <span xid="span5">getInputVal</span> 
        </a>  
        <div xid="parent"/> 
      </div> 
    </div> 
  </div>  
  <span xmlns="" component="$model/UI2/system/components/justep/windowDialog/windowDialog" xid="windowDialog" style="left:458px;top:183px;" data-bind="component:{name:'$model/UI2/system/components/justep/windowDialog/windowDialog'}" data-config="{&quot;src&quot;:&quot;$model/UI2/system/components/justep/common/demo/dialog.w&quot;}"> 
    <div xmlns:xhtml="http://www.w3.org/1999/xhtml" class="x-dialog-overlay"></div>  
    <div xmlns:xhtml="http://www.w3.org/1999/xhtml" class="x-dialog">  
      <div class="x-dialog-title"> 
        <button class="close"> 
          <span>×</span> 
        </button>  
        <div class="x-dialog-title-text"/> 
      </div>  
      <div class="x-dialog-body"/> 
    </div> 
  </span> 
</div>
